import React, { PureComponent, useEffect, useState } from 'react'
import { StyleSheet, View, FlatList, Text, TouchableOpacity, Image, Dimensions, ScrollView } from 'react-native'
import { SearchBar, Toast } from 'antd-mobile-rn';
import axios from '../api/axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
let AutoResponsive = require('autoresponsive-react-native');
const screenWidth = Dimensions.get('window').width;
// const baseURL = 'http://192.168.253.1:8080'
import {baseURL} from '../context/AuthProvider'
const Home = ({ navigation, route }) => {
    // const {}
    const [refreshing, setRefreshing] = useState(false);
    // const [isRefreshing, setRefreshing] = useState(false);
    const [value, setValue] = useState('');
    const [showCancel, setShowCancel] = useState(true);
    const [goodslist, setGoodslist] = useState([])
    const [goodsimg, setGoodsimg] = useState([])
    const [page, setPage] = useState(1)
    const arr = []

    useEffect(() => {
        axios.post('/buy/getgoods', { page: page, size: 20 }).then(res => {
            // console.log(res);
            setRefreshing(false)
                if (page == 1) {
                    setGoodslist(res.data)
                    AsyncStorage.setItem('goodslist', JSON.stringify(res.data))
                } else {
                    setGoodslist([...goodslist, ...res.data])
                    setPage(2)
                    AsyncStorage.setItem('goodslist', JSON.stringify(res.data))
                }
            // setGoodslist([...goodslist, res.data])
            // AsyncStorage.setItem('goodslist', JSON.stringify(res.data))
        })
    }, [page])
    const onChange = (currentValue) => {
        setValue(currentValue);
    }
    const clear = () => {
        setValue('');
        setShowCancel(false);
    }
    const getAutoResponsiveProps = () => {
        return {
            itemMargin: 8
        };
    }
    const getChildrenStyle = (value) => {
        // let imageWidth = Image.resolveAssetSource(value).width
        // let imageHeight = Image.resolveAssetSource(value).height
        return {
            width: (screenWidth - 18) / 2,
            height: (screenWidth - 18) / 2 + 80,
            backgroundColor: '#fff',
            padding: 12,
            borderRadius: 8,
            justifyContent: 'space-between'
        };
    }
    const search = (value) => {
        axios.post('/buy/searchgoods', { text: value }).then(res => {
            setGoodslist(res.data)
        })
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }

    const renderItem = ({ item }) => (
        <TouchableOpacity key={item.commodityid} activeOpacity={1} style={[getChildrenStyle(require('../../images/mycrops/addcrops/柠檬.jpg'))]}
            onPress={() => navigation.navigate('gooddetail', { item: item.commodityid })}>
            <Image source={{ uri: item.first_img }} style={{ width: '100%', height: (screenWidth - 18) / 2 - 25 }}></Image>
            <View style={{ height: (screenWidth - 18) / 2 }}>
                <Text style={{ marginTop: 5, marginBottom: 5 }} numberOfLines={2}>{item.com_name}</Text>
                <Text style={{ color: '#df5916', fontSize: 16 }}>￥{item.com_price}</Text>
            </View>
        </TouchableOpacity>
    )
    // const 
    return (
        <ScrollView style={styles.container}>
            <View style={styles.title}>
                <SearchBar
                    value={value}
                    placeholder="点击搜索"
                    onSubmit={value => search(value)}
                    onCancel={clear}
                    onChange={onChange}
                    cancelText='取消'
                    showCancelButton={showCancel}
                />
            </View>
            <AutoResponsive {...getAutoResponsiveProps()}>
                {
                    goodslist.map((item, index) => {
                        return <TouchableOpacity key={item.commodityid} activeOpacity={1} style={[getChildrenStyle(require('../../images/mycrops/addcrops/柠檬.jpg'))]}
                            onPress={() => navigation.navigate('gooddetail', { item: item.commodityid })}>
                            <Image source={{ uri: baseURL+ item.first_img }} style={{ width: '100%', height: (screenWidth - 18) / 2 - 25 }}></Image>
                            <View style={{ height: (screenWidth - 18) / 2 }}>
                                <Text style={{ marginTop: 5, marginBottom: 5 }} numberOfLines={2}>{item.com_name}</Text>
                                <Text style={{ color: '#df5916', fontSize: 16 }}>￥{item.com_price}</Text>
                            </View>
                        </TouchableOpacity>
                    })
                }
            {/* <FlatList style={{width: '100%', }}  
            // columnWrapperStyle={{}}
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={goodslist}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.commodityid}
                /> */}
            </AutoResponsive>

        </ScrollView>
    )
}

export default Home

let styles = StyleSheet.create({
    container: {
        marginHorizontal: 15
        // backgroundColor: '#fff',
    },
    title: {
        paddingTop: 10,
        paddingBottom: 10,
    },
    titleText: {
        color: '#d0bbab',
        textAlign: 'center',
        fontSize: 36,
        fontWeight: 'bold',
    }
});

